<template id="cmp">
    <div data-type="cmp">
        <div class="label">[[DETECTORS]]<div class="help">[[DETECTORS_HELP]]</div></div>	
        <div data-plug="detector" data-multiple="true" data-bind="detectors"></div>
        <div class="label">[[METHODS]]<div class="help">[[METHODS_HELP]]</div></div>
        <div data-plug="method" data-multiple="true" data-bind="methods"></div>
    </div>
</template>

<template id="detector">
    <div data-type="detector" data-fold-name="[[DETECTOR]]">
        <div class="label">[[PRESENT_MATCHER]]<div class="help">[[PRESENT_MATCHER_HELP]]</div></div>
        <div data-bind="presentMatcher" data-plug="matcher" data-multiple="true"></div>
        <div class="label">[[SHOWING_MATCHER]]<div class="help">[[SHOWING_MATCHER_HELP]]</div></div>
        <div data-bind="showingMatcher" data-plug="matcher" data-multiple="true"></div>
    </div>
</template>

<template id="matcher_css">
    <div data-type="matcher" data-variant="css" data-fold-name="[[CSS_MATCHER]]">
        <div data-plug="domSelector"></div>
    </div>
</template>

<template id="matcher_onoff">
    <div data-type="matcher" data-variant="onoff" data-fold-name="[[ONOFF_MATCHER]]">
        <div class="label">[[ONOFF_MATCHER_TRUE]]<div class="help">[[ONOFF_MATCHER_TRUE_HELP]]</div></div>
        <div data-bind="onMatcher" data-plug="domSelector"></div>
        <div class="label">[[ONOFF_MATCHER_FALSE]]<div class="help">[[ONOFF_MATCHER_FALSE_HELP]]</div></div>
        <div data-bind="offMatcher" data-plug="domSelector"></div>
    </div>
</template>

<template id="matcher_url">
    <div data-type="matcher" data-variant="url" data-fold-name="[[URL_MATCHER]]">
        <div class="label">[[URL_LABEL]]<div class="help">[[URL_LABEL_HELP]]</div></div>
        <div data-bind="url"><ul class="list"><li><input size="30"/></li></li></ul></div>
        <div class="label">[[REGEXP_LABEL]]<div class="help">[[REGEXP_LABEL_HELP]]</div></div>
        <div data-bind="regexp"><input type="checkbox" /></div>
        <div class="label inline">[[NEGATED]]<div class="help">[[NEGATED_URL_HELP]]</div></div>
        <div data-bind="negated"><input type="checkbox" /></div>
    </div>
</template>

<template id="matcher_checkbox">
    <div data-type="matcher" data-variant="checkbox" data-fold-name="[[CHECKBOX_MATCHER]]">
        <div class="label">[[SELECTOR]]<div class="help">[[SELECTOR_HELP]]</div></div>
        <div data-plug="domSelector"></div>
        <div class="label inline">[[NEGATED]]<div class="help">[[NEGATED_CHECKBOX_HELP]]</div></div>
        <div data-bind="negated"><input type="checkbox" /></div>
    </div>
</template>

<template id="domSelector">
    <div data-type="domSelector">
        <div class="label">[[TARGET]]<div class="help">[[TARGET_HELP]]</div></div>
        <div class="target toggled" data-fold-name="[[DOM_NODE_SELECTOR]]" data-plug="domSelectorChild" data-bind="target"></div>
        <div class="label">[[PARENT]]<div class="help">[[PARENT_HELP]]</div></div>
        <div class="parent toggled" data-fold-name="[[DOM_NODE_SELECTOR]]" data-plug="domSelectorChild" data-bind="parent"></div>
    </div>
</template>

<template id="domSelectorChild">
    <div data-type="domSelectorChild">
        <div class="label">[[SELECTOR]]<div class="help">[[SELECTOR_HELP]]</div></div>
        <div data-bind="selector"><input size="30" /></div>
        <div class="label">[[TEXT_FILTER]]<div class="help">[[TEXT_FILTER_HELP]]</div></div>
        <div data-bind="textFilter"><ul class="list"><li><input size="30"/></li></li></ul></div>
        <div class="label">[[IFRAME_FILTER]]<div class="help">[[IFRAME_FILTER_HELP]]</div></div>
        <div data-bind="iframeFilter"><input type="checkbox" /></div>
        <div class="label inline">[[DISPLAY_FILTER]]<div class="help">[[DISPLAY_FILTER_HELP]]</div></div>
        <div data-bind="displayFilter"><input type="checkbox" /></div>
        <div class="label">[[CHILD_FILTER]]<div class="help">[[CHILD_FILTER_HELP]]</div></div>
        <div data-bind="childFilter" data-plug="domSelector"></div>
        <div class="label">[[CHILD_FILTER_NEGATE]]<div class="help">[[CHILD_FILTER_NEGATE_HELP]]</div></div>
        <div data-bind="childFilterNegate"><input type="checkbox" /></div>
    </div>
</template>

<template id="method">
    <div data-type="method">
        <div data-bind="name"></div>
        <div data-bind="action" data-plug="action"></div>
        <div data-bind="custom" style="display: none"><input type="checkbox" /></div>
    </div>
</template>

<template id="action_list">
    <div data-type="action" data-variant="list" data-fold-name="[[LIST_ACTION]]">
        <div class="label">[[ACTIONS]]<div class="help">[[ACTIONS_HELP]]</div></div>
        <div data-bind="actions" data-plug="action" data-multiple="true"></div>
    </div>
</template>

<template id="action_close">
    <div data-type="action" data-variant="close">
        [[CLOSE_ACTION]]
    </div>
</template>

<template id="action_foreach">
    <div data-type="action" data-variant="foreach" data-fold-name="[[FOR_EACH_ACTION]]">
        <div class="label">[[SELECTOR]]<div class="help">[[SELECTOR_HELP_LIST]]</div></div>
        <div data-plug="domSelector"></div>
        <div class="label">[[ACTION]]<div class="help">[[ACTION_HELP]]</div></div>
        <div data-bind="action" data-plug="action"></div>
    </div>
</template>

<template id="action_runrooted">
    <div data-type="action" data-variant="runrooted" data-fold-name="[[RUN_ROOTED_ACTION]]">
        <div class="label">[[SELECTOR]]<div class="help">[[SELECTOR_HELP_LIST]]</div></div>
        <div data-plug="domSelector"></div>
        <div class="label">[[ACTION]]<div class="help">[[ACTION_HELP]]</div></div>
        <div data-bind="action" data-plug="action"></div>
        <div class="label">[[IGNORE_OLD_ROOT]]<div class="help">[[IGNORE_OLD_ROOT_HELP]]</div></div>
        <div data-bind="ignoreOldRoot"><input type="checkbox" /></div>
    </div>
</template>

<template id="action_runmethod">
    <div data-type="action" data-variant="runmethod" data-fold-name="[[RUN_METHOD_ACTION]]">
        <div class="label">[[METHOD]]<div class="help">[[METHOD_HELP]]</div></div>
        <div data-bind="method"><input size="30" /></div>
    </div>
</template>

<template id="action_ifcss">
    <div data-type="action" data-variant="ifcss" data-fold-name="[[IF_CSS_ACTION]]">
        <div class="label">[[SELECTOR]]<div class="help">[[SELECTOR_HELP]]</div></div>
        <div data-plug="domSelector"></div>
        <div class="label">[[IF_TRUE_ACTION]]<div class="help">[[IF_TRUE_ACTION_HELP]]</div></div>
        <div data-plug="action" data-bind="trueAction"></div>
        <div class="label">[[IF_FALSE_ACTION]]<div class="help">[[IF_FALSE_ACTION_HELP]]</div></div>
        <div data-plug="action" data-bind="falseAction"></div>
    </div>
</template>

<template id="action_ifallowall">
    <div data-type="action" data-variant="ifallowall" data-fold-name="[[IF_ALLOW_ALL_ACTION]]">
        <div class="label">[[IF_TRUE_ACTION]]<div class="help">[[IF_TRUE_ACTION_HELP]]</div></div>
        <div data-plug="action" data-bind="trueAction"></div>
        <div class="label">[[IF_FALSE_ACTION]]<div class="help">[[IF_FALSE_ACTION_HELP]]</div></div>
        <div data-plug="action" data-bind="falseAction"></div>
    </div>
</template>

<template id="action_ifallownone">
    <div data-type="action" data-variant="ifallownone" data-fold-name="[[IF_ALLOW_NONE_ACTION]]">
        <div class="label">[[IF_TRUE_ACTION]]<div class="help">[[IF_TRUE_ACTION_HELP]]</div></div>
        <div data-plug="action" data-bind="trueAction"></div>
        <div class="label">[[IF_FALSE_ACTION]]<div class="help">[[IF_FALSE_ACTION_HELP]]</div></div>
        <div data-plug="action" data-bind="falseAction"></div>
    </div>
</template>

<template id="action_click">
    <div data-type="action" data-variant="click" data-fold-name="[[CLICK_ACTION]]">
        <div class="label">[[SELECTOR]]<div class="help">[[SELECTOR_CLICK_HELP]]</div></div>
        <div data-plug="domSelector"></div>
        <div class="label">[[OPEN_IN_TAB]]<div class="help">[[OPEN_IN_TAB_HELP]]</div></div>        
        <div data-bind="openInTab"><input type="checkbox" /></div>
        <div class="label">Disable click timeout<div class="help">If enabled, dont do any timeout for this click, warning, this means no UI is updated!</div></div>
        <div data-bind="noTimeout"><input type="checkbox" /></div>
    </div>
</template>

<template id="action_multiclick">
    <div data-type="action" data-variant="multiclick" data-fold-name="[[MULTICLICK_ACTION]]">
        <div class="label">[[SELECTOR]]<div class="help">[[SELECTOR_CLICK_HELP]]</div></div>
        <div data-plug="domSelector"></div>
    </div>
</template>

<template id="action_hide">
    <div data-type="action" data-variant="hide" data-fold-name="[[HIDE_ACTION]]">
        <div class="label">[[SELECTOR]]<div class="help">[[SELECTOR_HIDE_HELP]]</div></div>
        <div data-plug="domSelector"></div>
        <div class="label">[[HIDE_FROM_DETECTION]]<div class="help">[[HIDE_FROM_DETECTION_HELP]]</div></div>        
        <div data-bind="hideFromDetection"><input type="checkbox" /></div>
        <div class="label">[[FORCE_HIDE]]<div class="help">[[FORCE_HIDE_HELP]]</div></div>        
        <div data-bind="forceHide"><input type="checkbox" /></div>
    </div>
</template>

<template id="action_slide">
    <div data-type="action" data-variant="slide" data-fold-name="[[SLIDE_ACTION]]">
        <div class="label">[[TARGET]]<div class="help">[[TARGET_SLIDE_HELP]]</div></div>
        <div data-bind="target" data-plug="domSelector"></div>

        <div class="label">[[DRAG_TARGET]]<div class="help">[[DRAG_TARGET_HELP]]</div></div>
        <div data-bind="dragTarget" data-plug="domSelector"></div>

        <div class="label">[[AXIS]]<div class="help">[[AXIS_HELP]]</div></div>
        <div class="axis" data-bind="axis">
            <select>
                <option value="y">[[Y]]</option>
                <option value="x">[[X]]</option>
            </select>
        </div>
    </div>
</template>

<template id="action_waitcss">
    <div data-type="action" data-variant="waitcss" data-fold-name="[[WAIT_CSS_ACTION]]">
        <div class="label">[[WAIT_FOR]]<div class="help">[[WAIT_FOR_HELP]]</div></div>        
        <div data-plug="domSelector"></div>
        
        <div class="label">[[RETRIES]]<div class="help">[[RETRIES_HELP]]</div></div>
        <div data-bind="retries"><input type="number" min="1" max="100" value="10" /></div>
        
        <div class="label">[[WAIT_TIME]]<div class="help">[[WAIT_TIME_HELP]]</div></div>
        <div data-bind="waitTime"><input type="number" min="100" max="5000" value="250" /></div>
        
        <div class="label">[[NEGATED]]<div class="help">[[NEGATED_HELP]]</div></div>
        <div data-bind="negated"><input type="checkbox" /></div>
    </div>
</template>

<template id="action_wait">
    <div data-type="action" data-variant="wait" data-fold-name="[[WAIT_ACTION]]">
        <div data-bind="waitTime"><div class="label inline">[[WAIT_TIME]]<div class="help">[[ACTION_WAIT_TIME_HELP]]</div></div><input type="number" min="10" max="5000" value="250" /></div>
    </div>
</template>

<template id="action_consent">
    <div data-type="action" data-variant="consent" data-fold-name="[[CONSENT_ACTION]]">
        <div class="label">[[CONSENTS]]</div>
        <div data-bind="consents" data-plug="consent" data-multiple="true"></div>
    </div>
</template>

<template id="consent">
    <div data-type="consent" data-fold-name="[[CONSENT]]">
        <div class="label">[[TYPE]]<div class="help">[[TYPE_HELP]]</div></div>
        <div class="type" data-bind="type">
            <select>
                <option value="A">[[TYPE_A_OPTION]]</option>
                <option value="B">[[TYPE_B_OPTION]]</option>
                <option value="D">[[TYPE_D_OPTION]]</option>
                <option value="E">[[TYPE_E_OPTION]]</option>
                <option value="F">[[TYPE_F_OPTION]]</option>
                <option value="X">[[TYPE_X_OPTION]]</option>
            </select>
        </div>
        <div class="label">[[CONSENT_MATCHER]]<div class="help">[[CONSENT_MATCHER_HELP]]</div></div>
        <div data-plug="matcher" data-bind="matcher"></div>
        <div class="label">[[TOGGLE_ACTION]]<div class="help">[[TOGGLE_ACTION_HELP]]</div></div>
        <div data-plug="action" data-bind="toggleAction"></div>
        <div class="label">[[IF_TRUE_ACTION]]<div class="help">[[CONSENT_TRUE_ACTION_HELP]]</div></div>
        <div data-plug="action" data-bind="trueAction"></div>
        <div class="label">[[IF_FALSE_ACTION]]<div class="help">[[CONSENT_FALSE_ACTION_HELP]]</div></div>
        <div data-plug="action" data-bind="falseAction"></div>
    </div>
</template>
